<template>

    <div>
        <div>
            <h1>图书管理系统</h1>
            <Button @click="addNew">新增图书</Button>
            <BookEdit v-show='dialogVisible' :data='editData' :visible.sync='dialogVisible'
            @save='save'></BookEdit>
        </div>


        <div>
            <table style='margin: auto; border:1; ' width='600px' height='250px' border="1">
        <tr>
          <th>图书编号</th>
          <th>图书名字</th>
          <th>出版时间</th>
          <th>阅读数</th>
          <th>评论数</th>
          <th>操作</th>
        </tr>
        <tr
          v-for="(book, index) in books"
          :key="book.id"
        >
          <td>{{book.id}}</td>
          <td>{{book.btitle}}</td>
          <td>{{book.bpub_date}}</td>
          <td>{{book.bread}}</td>
          <td>{{book.bcomment}}</td>
          <td>
            <Button @click="edit(index)" >修改</button>
            <Button @click="del(book.id)">删除</button>
          </td>
        </tr>
      </Table>
        </div>


    </div>
</template>

<script>
import { getBooks,addBook,editBook,delBook} from '@/http/apis'
import BookEdit from '@/components/BookEdit'
export default {
    components:{
        BookEdit
    },
    data() {
        return {
            //默认不显示弹框
            dialogVisible:false,
            //图书容器
            books:[],
            editData:{  //编辑的内容
                btitle:"",
                bpub_date:'',
                bread:0,
                bcomment:0
            }
            
        }
    },
    methods: {
        addNew() {
            this.editData = {  // 初始化 编辑内容
                btitle: "",
                bpub_date: "",
                bread: 0,
                bcomment: 0
            }
            this.dialogVisible = true  // 显示弹框
        },
        get(){
            getBooks().then((data)=>{
                console.log(data)
                this.books=data.booksinfo
            })
            // this.axios.get('http://127.0.0.1:8000/user/bookinfo/')
            // .then(res=>{
            //     console.log(res)
            //     this.books=res.booksinfo
            // })
        },
        save(){
            // 根据editData中的id判断是更新还是新增
            console.log('这个是save里面的this.editData',this.editData)
            if(this.editData.id){
                let params = this.editData  
                //修改图书          
                editBook(params).then((res)=>{
                    console.log(res)
                    this.get()
                })

            }else{
                addBook(this.editData).then(res=>{
                    this.get()
                })
            }
            
        },
        //修改
        edit(index){
            this.editData=this.books[index]
            //this.books[index]这是一条完整的字典形式的图书的数据
            console.log(this.books[index])
            console.log('Json.parse之后的',JSON.parse(JSON.stringify(this.books[index])))
            console.log('Json.stringify之后的',JSON.stringify(this.books[index]))
            console.log('修改',this.editData)
            this.dialogVisible = true
        },
        del(id){
            let params={
                id : id
            }
            delBook(params).then((res)=>{
            console.log(res)
            this.get()
      })

        }
        
    },
    created() {
        this.get()
       
       
    },
}
</script>

<style>

</style>
